<template>
  <div class="register-page">
    <yukino-snow></yukino-snow>
    <div class="register-panel">
      <div class="register-header">
        <h2>注册</h2>
        <p>Yukinoshita Yukino</p>
      </div>
      <div class="line"></div>
      
      <el-form :model="registerForm" :rules="registerRules" ref="registerForm" class="yukino-form">
        <!-- 账号 -->
        <div class="yukino-input">
          <el-form-item prop="username">
            <label for="username">用户名</label>
            <el-input v-model="registerForm.username" placeholder="请输入账号"></el-input>
          </el-form-item>
        </div>
        <!-- 密码 -->
        <div class="yukino-input">
          <el-form-item prop="password">
            <label for="password">密码</label>
            <el-input v-model="registerForm.password" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
        </div>
        <div class="yukino-input">
          <el-form-item prop="againPassword">
            <label for="againPassword">再次输入密码</label>
            <el-input v-model="registerForm.againPassword" placeholder="请再次输入密码" show-password></el-input>
          </el-form-item>
        </div>
        <!-- 注册身份 -->
        <!-- 有空的话把 el-select 的样式改改 -->
        <div class="yukino-input">
          <el-form-item prop="role">
            <label for="role">身份</label>
              <el-select v-model="registerForm.role" placeholder="请选择注册身份">
                <el-option
                    v-for="item in roleList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
              </el-select>            
          </el-form-item>
        </div>        
      </el-form>

      <div class="register-operate">
        <button @click="register()">注册</button>
      </div>
      <div class="register-link">
        <el-link href="/login" :underline="false" type="primary">返回登录</el-link>
        <el-link href="/forget" :underline="false" type="primary">忘记密码</el-link>
      </div>
    </div>
  </div>
</template>
<script>
import yukinoSnow from '../components/snow'

import qs from 'qs';
export default {
  data() {
    // 检查用户名
    var checkUsername = (rule, value, callback) => {
      let _this = this;
      this.$axios
        .post(
          "/api/checkUsername.php",
          qs.stringify({
            username: _this.registerForm.username,
          })
        )
        .then(function (res) {
          if (res.data === "existed") {
            callback(new Error("该用户名已存在"));
          } else {
            callback();
          }
        });
    };
    // 检查密码
    var checkPass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        username: '',
        password: '',
        againPassword: '',
        role: ''
      },
      role: "uploader",
      roleList: {
        uploader: {
          label: "UP主",
          value: "uploader",
        },
        consumer: {
          label: "用户",
          value: "consumer",
        },
      },
      registerRules: {
        username: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            min: 5,
            max: 12,
            message: "长度在 5 到 12 个字符",
            trigger: "change",
          },
          {
            validator: checkUsername,
            trigger: ["change", "blur"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 12,
            message: "长度在 6 到 12 个字符",
            trigger: "change",
          },
        ],
        againPassword: [
          {
            validator: checkPass,
            trigger: ["blur", "change"],
          },
        ],
      }
    };
  },
  methods: {
    register() {
      let _this = this;
      // console.log(this.registerForm);
      this.$refs.registerForm.validate((valid)=>{
        if(valid) {
          this.$axios.post("/api/register.php", qs.stringify({
            username: _this.registerForm.username,
            password: _this.registerForm.password,
            role: _this.registerForm.role
          })).then((res)=>{
            // 注册成功
            if (res.data === "success") {
              console.log("注册成功");
              _this.$notify({
                type: "success",
                message: "注册成功，即将返回登录页面(●ˇ∀ˇ●)!~",
                duration: 2000,
              });
              setTimeout(function () {
                window.location.href = "/login";
              }, 2000);
            }
            // 注册失败
            else {
              console.log("注册失败");
              _this.$notify({
                type: "error",
                message: "注册未知原因失败Σ(っ °Д °;)っ!~",
                duration: 2000,
              });
              setTimeout(function () {
                window.location.href = "/register";
              }, 2000);
            }
          }).catch((err)=>{
            console.log(err);
          })
        }
      })
    }
  },
  components: {
    yukinoSnow
  }
};
</script>
<style scoped>
/* 整个页面 */
.register-page {
  background: url(../assets/pics/yukino_bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  color: rgb(233, 233, 233);
}
/* 登录面板 */
.register-panel {
  width: 500px;
  background: rgba(42, 49, 65, 0.6);
  box-shadow: 3px 3px 5px 3px #505d72;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 10px;
  z-index: 1000;
}
/* 标题 */
.register-header h2 {
  margin: 10px 0 5px 0;
}
.register-header p {
  margin-bottom: 5px;
}
/* 输入框 */
.yukino-input {
  width: 400px;
  margin: 0 auto;
}
/* 标签 */
.yukino-input label {
  float: left;
  padding-left: 10px;
  font-size: 18px;
  font-weight: 800;
  height: 30px;
}
/* 输入框 */
.yukino-input>>>.el-input__inner {
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.el-input {
  margin: 5px 0 0 0 !important;
}
.yukino-input .el-input {
  width: 95%;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  outline: none;
  margin: 10px;
  /* color: #fff; */
}
.yukino-input>>>.el-form-item__error {
  padding-left: 10px !important;
}

.yukino-input .el-select {
  width: 95%;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  outline: none;
  margin: 10px;
  background: rgba(0,0,0,0.2);
}
/* 注册按钮 */
.register-operate button {
  border: none;
  outline: none;
  padding: 5px 15px;
  font-size: 25px;
  font-weight: 800;
  margin: 10px 0;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 8px;
  background: rgba(42, 49, 65, 0.6);
  cursor: pointer;
  transition: 0.5s ease;
}
.register-operate button:hover {
  color: rgba(42, 49, 65, 0.6);
  background: #fff;
  border: 2px solid rgba(42, 49, 65, 0.6);
}
/* 链接 */
.register-link {
  width: 85%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}
.register-link .el-link {
  color: #fff;
}
/* 分隔符 */
.line {
  /* margin: 0 auto; */
  border-bottom: 1px solid #fff;
  width: 80%;
  margin: 5px auto 15px auto;
}
</style>
